@charset "utf-8";
@function bfb($p){
    @return $p / 1366 * 100%;
}
@function con($p){
    @return $p / 960 * 100%;
}
html,body{
    width: 100%;
}
.store_h{
    width:bfb(1366);
    .nav{
        margin-left: bfb(180);
        margin-bottom: 23px;
        margin-top: 24px;
        li{
            float: left;
            padding-right:bfb(4);
            a{
                color: #444f58;
            }
        }
        
        
    }
    .banner{
        width: bfb(1366);
        height: 300px;
        font-size: 0;
        background: cadetblue;
        overflow: hidden;
        position: relative;
        >img{
            width: 100%;
            height: 300px;
        }
        .hover_block{
            position: absolute;
            bottom: 0;
            width:bfb(1366);
            background-color:rgba(000,000,000,.7);
            height: 33.3%;
            transition: all 1s; 
            transform: translateY(120px);
            
            .bn_content{
                width: bfb(960);
                margin: 0 auto;
//              background: skyblue;
                .img{
                    width: con(100);
                    height: 100%;
                    margin-top: -17px;
//                  padding-left: con(3);
                    img{
                        width: 100%;
                          
                    }
                }
                .text{
                    margin: 20px 0 0 27px;
                    .title{
                        font-size:18px;
                        color: #FFFFFF;
                        line-height: 19px;
                    }
                    .t_text{
                        font-size: 14px;
                        color: #FFFFFF;
                        line-height: 15px;
                        padding-top: 17px;
                    }
                }
                .btn{
                    width: 20%;
                    margin-top: 20px;
                    a{
                        float: left;
                        font-size: 14px;
                        letter-spacing: 1px;
                        color: #ffffff;
                        padding: 6px 14px;
                        background-color: #e60012;
                        border-radius: 4px;
                        margin-left: 8%;

                    }
                }
            }
        }
      
        >img:hover+.hover_block{
            transform: translateY(0);
        }
        .hover_block:hover{
            transform: translateY(0);
        }
    }
}
.content{
    width: bfb(960);
    margin: 10px auto 44px;
    .drop_down{
        width: 100%;
        border: 1px solid #efefef;
        .btn{
            width: con(140);
            line-height: 54px;
            text-align: center;
            border-right: 1px solid #efefef;
            cursor: pointer;
            p{
                font-size: 14px;
                letter-spacing: 1px;
                color: #444f58;
                img{
                    padding-left: con(13);
                }
            }
        }
        .radio{
            margin-left: con(23);
            width: 30%;
            line-height: 53px;
            vertical-align: middle;          
                label{
                    width: 14px;
                    height: 14px;
                    margin-left: con(23);
                    display: inline-block;
                    border-radius: 50%;
                    line-height: 14px;
                    vertical-align:middle;
                    border: solid 1px #efefef;
                    text-align: center;
                    margin-right: 10px;
                }
                label:hover {
                      cursor: pointer;
                }
        }
        .total{
                font-size: 14px;
                line-height: 53px;
                margin-right: 23px;
            .number{
                color: #99999a;
                display: inline-block;
                margin-right: 17px;
                span{
                    color: #444f58;
                }
            }
            .page{
                display: inline-block;
                color: #444f58;
                span{
                    color: #e60012;
                    
                }
            }
        }
    }
    .che_active{
                display: none;
            }
    .chea_active{
                display: none;
            }
    .che_active:checked~.drop_down .radio label:first-of-type{
          background: #FFFFFF;
        }
    .che_active:checked~.drop_down .radio label:first-of-type:after {
      content: "\2022";
      font-size: 25px;
      color: rgb(230, 0, 18);
      line-height: 9px;
    }
    .che_active:checked~.conter{
        display: block;
    }
    .chea_active:checked~.contera{
        display: block;
    }
    .chea_active:checked~.drop_down .radio label:first-of-type{
          background: #FFFFFF;
        }
    .chea_active:checked~.drop_down .radio label:last-of-type:after {
      content: "\2022";
      font-size: 25px;
      color: rgb(230, 0, 18);
      line-height: 9px;
    }
    .conter{
       width:100%;
       margin-top: 10px;
       margin-bottom: 44px;
       display: none;

       .b_block{
           width: 100%;
           text-align: justify;
           height: 334px;
           .s_block{
               width: con(232);
               font-size: 0;
               display: inline-block;
               .img_block{
                   width: 100%;
                   height: 100%;
                   overflow: hidden;
                   border: 1px solid #efefef;
                   position: relative;

                   img{
                        width: 100%;
                   }
                   .mask_top{
                       position: absolute;
                       top: 0;
                       width: 100%;
                       height: 50%;
                       background:rgba(000,000,000,.5);
                       overflow: hidden;
                       transition:all .5s;
                       transform: translateY(-101%);
                       a{
                           display: block;
                           font-size: 20px;
                           position: absolute;
                           bottom: 0;
                           left: 50%;
                           transform: translateX(-50%) translateY(50%);
                           color: #89e5bb;
                       }
                   }
                   .mask_left{
                       position: absolute;
                       left: 0;
                       top: 0;
                       padding-top: 50%;
                       width: 50%;
                       height:100%;
                       background:rgba(000,000,000,.5);
                       overflow: hidden;
                       transition:all .5s;
                       transform: translateX(-101%);
                       a{
                           display: block;
                           font-size: 20px;
                           text-align: right;
                           transform: translateX(40px);
                           color: #89e5bb;
                           line-height: 0;
                       }
                   }
                   .mask_right{
                       position: absolute;
                       top:0;
                       padding-top: 50%;
                       right: 0;
                       width: 50%;
                       height:100%;
                       background:rgba(000,000,000,.5);
                       overflow: hidden;
                       transition:all .5s;
                       transform: translateX(101%);
                       a{
                           display: block;
                           font-size: 20px;
                           text-align: left;
                           transform: translateX(-40px);
                           line-height: 0;
                           color: #89e5bb;
                       }
                   }
                    .mask_dowm{
                       position: absolute;
                       bottom: 0;
                       width: 100%;
                       height:50%;
                       background:rgba(000,000,000,.5);
                       overflow: hidden;
                       transition:all .5s;
                       transform: translateY(101%);
                       a{
                           display: block;
                           font-size: 20px;
                           color: #89e5bb;
                           position: absolute;
                           top: 0;
                           left: 50%;
                           transform: translateX(-50%) translateY(-50%);
                           color: #89e5bb;
                       }
                    }
                     .mask_r_t{
                        position: absolute;
                        top: 0;
                        width: 167%;
                        height: 73%;
                        overflow: hidden;
                        background: rgba(0, 0, 0, 0.5);
                        transition: all .5s;
                        transform: rotateZ(45deg) translateX(-31px) translateY(-103.35%);
                        a{
                           display: block;
                           color: #89e5bb;
                           position: absolute;
                           bottom: 0;
                           left:50%;
                           line-height: 0;
                           transform:translateX(-50%) rotateZ(-45deg)  ;
                           font-size: 20px;
                        }
                    }
                        .mask_l_d{
                            position: absolute;
                            top: 0;
                            width: 167%;
                            height: 73%;
                            overflow: hidden;
                            background: rgba(0, 0, 0, 0.5);
                            transition: all .5s;
                            transform: rotateZ(45deg) translateX(-31px) translateY(192.65%);
            }
                            .mask_l_d a{
                                display: block;
                                font-size: 20px;
                                color: #89e5bb;
                                position: absolute;
                                line-height: 0;
                                top: 0;
                                left:50%;
                                transform:translateX(-50%) rotateZ(-45deg)    ;
                            }
                   
                        }  
                        .mask_lt{
                           position: absolute;
                           top: 0;
                           left:0; 
                           width:50%;
                           height: 50%;
                           background: rgba(0, 0, 0,.5);
                           overflow: hidden;
                           transition: all .5s;
                           transform: translateX(-100%) translateY(-100%);
                           a{
                               display: block;
                               font-size: 20px;
                               text-align: center;
                               position: absolute;
                               bottom: 0;
                               right: 0;
                               color: #89e5bb;
                               transform: translateX(50%) translateY(50%);
                           }
                        }
                        .mask_rt{
                           position: absolute;
                           top: 0;
                           right:0; 
                           width:50%;
                           height: 50%;
                           background: rgba(0, 0, 0,.5);
                           overflow: hidden;
                           transition: all .5s;
                           transform: translateX(101%) translateY(-100%);
                           
                           
                           a{
                               display: block;
                               font-size: 20px;
                               text-align: center;
                               position: absolute;
                               bottom: 0;
                               left: 0;
                               color: #89e5bb;
                               transform: translateX(-50%) translateY(50%);
                           }
                        }
                        .mask_ld{
                           position: absolute;
                           bottom: 0;
                           left:0; 
                           width:50%;
                           height: 50%;
                           background: rgba(0, 0, 0,.5);
                           overflow: hidden;
                           transition: all .5s;
                           transform: translateX(-101%) translateY(100%);
                           
                           a{
                               display: block;
                               font-size: 20px;
                               text-align: center;
                               position: absolute;
                               top: 0;
                               right: 0;
                               color: #89e5bb;
                               transform: translateX(50%) translateY(-50%);
                           }
                        }
                        .mask_rd{
                           position: absolute;
                           bottom: 0;
                           right:0; 
                           width:50%;
                           height: 50%;
                           background: rgba(0, 0, 0,.5);
                           overflow: hidden;
                           transition: all .5s;
                           transform: translateX(101%) translateY(100%);
                           
                           a{
                               display: block;
                               font-size: 20px;
                               text-align: center;
                               position: absolute;
                               top: 0;
                               left: 0;
                               color: #89e5bb;
                               transform: translateX(-50%) translateY(-50%);
                           }
                           
                        }
                
                            
                
                
                .img_block:hover .mask_top{
                   transform: translateY(0);
                }
                .img_block:hover .mask_dowm{
                   transform: translateY(0);
                } 
                .img_block:hover .mask_left{
                   transform: translateX(0);
                }
                .img_block:hover .mask_right{
                   transform: translateX(0);
                } 
                .img_block:hover .mask_r_t{
                    transform: rotateZ(45deg) translateX(-31px) translateY(-4.35%);
                }
                .img_block:hover .mask_l_d{
                    transform: rotateZ(45deg) translateX(-31px) translateY(95.65%);
                }
                .img_block:hover .mask_lt{
                    transform: translateX(0) translateY(0);
                }
                .img_block:hover .mask_rt{
                    transform: translateX(0) translateY(0);
                }
                .img_block:hover .mask_ld{
                    transform: translateX(0) translateY(0);
                }
                .img_block:hover .mask_rd{
                    transform: translateX(0) translateY(0);
                }
                
               .text_block{
                   font-size: 14px;
                   margin-top: 14px;
                   p{
                      color: #444f58;
                      padding-bottom: 5px;
                   }
                   span{
                       
                      color: #99999a ; 
                   }
               }
           }
        
       }
       .b_block::after{
           content: "";
           display: inline-block;
           width: 100%;
           height: 0;
           
       }
       .pages{
           li{
               float: left;
               margin-left: 9px;
               width: 38px;
               height: 38px;
               a{
                   display: block;
                   line-height: 38px;
                   text-align: center;
                   border: solid 1px #e7e7e7;
                   border-radius: 3px;
                   color: #444f58;
               }
           }
           .active{
               border: solid 1px #eb413d;
           }
           .Jump_to{
                width: 68px;
                height: 38px;
                a{
                    color: #99999a;
                }
           }
           .text{
                width: 68px;
                height: 38px;
                border: solid 1px #e7e7e7;
                line-height: 38px;
                input{
                    width: 30px;
                    padding-left:5px ;
                    padding-right: 5px;
                    border: none;
                    margin-left: 10px;
                }
           }
           span{
               float: left;
               color: #444f58;
               
           }
           .stop{
                   line-height: 22px;
                   font-size: 30px;
                   margin-left: 9px;
           }
           .Jump{
               font-size: 12px;
               line-height: 42px;
               margin-left: 9px;
           }
       }
    }
    .contera{
       width:100%;
       margin-top: 10px;
       margin-bottom: 44px;
       display: none;
       .b_block{
           width: 100%;
           text-align: justify;
           height: 334px;
           .s_block{
               width: con(232);
               font-size: 0;
               display: inline-block;
               .img_block{
                   width: 100%;
//                 height: 100%;
                   
                   overflow: hidden;
                   border: 1px solid #efefef;
                   position: relative;

                   img{
                        width: 100%;
                   }
                   .mask_top{
                       position: absolute;
                       top: 0;
                       width: 100%;
                       height: 50%;
                       background:rgba(000,000,000,.5);
                       overflow: hidden;
                       transition:all .5s;
                       transform: translateY(-101%);
                       a{
                           display: block;
                           font-size: 20px;
                           position: absolute;
                           bottom: 0;
                           left: 50%;
                           transform: translateX(-50%) translateY(50%);
                           color: #89e5bb;
                       }
                   }
                   .mask_left{
                       position: absolute;
                       left: 0;
                       top: 0;
                       padding-top: 50%;
                       width: 50%;
                       height:100%;
                       background:rgba(000,000,000,.5);
                       overflow: hidden;
                       transition:all .5s;
                       transform: translateX(-101%);
                       a{
                           display: block;
                           font-size: 20px;
                           text-align: right;
                           transform: translateX(40px);
                           color: #89e5bb;
                           line-height: 0;
                       }
                   }
                   .mask_right{
                       position: absolute;
                       top:0;
                       padding-top: 50%;
                       right: 0;
                       width: 50%;
                       height:100%;
                       background:rgba(000,000,000,.5);
                       overflow: hidden;
                       transition:all .5s;
                       transform: translateX(101%);
                       a{
                           display: block;
                           font-size: 20px;
                           text-align: left;
                           transform: translateX(-40px);
                           line-height: 0;
                           color: #89e5bb;
                       }
                   }
                    .mask_dowm{
                       position: absolute;
                       bottom: 0;
                       width: 100%;
                       height:50%;
                       background:rgba(000,000,000,.5);
                       overflow: hidden;
                       transition:all .5s;
                       transform: translateY(101%);
                       a{
                           display: block;
                           font-size: 20px;
                           color: #89e5bb;
                           position: absolute;
                           top: 0;
                           left: 50%;
                           transform: translateX(-50%) translateY(-50%);
                           color: #89e5bb;
                       }
                    }
                     .mask_r_t{
                        position: absolute;
                        top: 0;
                        width: 167%;
                        height: 73%;
                        overflow: hidden;
                        background: rgba(0, 0, 0, 0.5);
                        transition: all .5s;
                        transform: rotateZ(45deg) translateX(-31px) translateY(-103.35%);
                        a{
                           display: block;
                           color: #89e5bb;
                           position: absolute;
                           bottom: 0;
                           left:50%;
                           line-height: 0;
                           transform:translateX(-50%) rotateZ(-45deg)  ;
                           font-size: 20px;
                        }
                    }
                        .mask_l_d{
                            position: absolute;
                            top: 0;
                            width: 167%;
                            height: 73%;
                            overflow: hidden;
                            background: rgba(0, 0, 0, 0.5);
                            transition: all .5s;
                            transform: rotateZ(45deg) translateX(-31px) translateY(192.65%);
            }
                            .mask_l_d a{
                                display: block;
                                font-size: 20px;
                                color: #89e5bb;
                                position: absolute;
                                line-height: 0;
                                top: 0;
                                left:50%;
                                transform:translateX(-50%) rotateZ(-45deg)    ;
                            }
                   
                        }  
                        .mask_lt{
                           position: absolute;
                           top: 0;
                           left:0; 
                           width:50%;
                           height: 50%;
                           background: rgba(0, 0, 0,.5);
                           overflow: hidden;
                           transition: all .5s;
                           transform: translateX(-100%) translateY(-100%);
                           a{
                               display: block;
                               font-size: 20px;
                               text-align: center;
                               position: absolute;
                               bottom: 0;
                               right: 0;
                               color: #89e5bb;
                               transform: translateX(50%) translateY(50%);
                           }
                        }
                        .mask_rt{
                           position: absolute;
                           top: 0;
                           right:0; 
                           width:50%;
                           height: 50%;
                           background: rgba(0, 0, 0,.5);
                           overflow: hidden;
                           transition: all .5s;
                           transform: translateX(101%) translateY(-100%);
                           
                           
                           a{
                               display: block;
                               font-size: 20px;
                               text-align: center;
                               position: absolute;
                               bottom: 0;
                               left: 0;
                               color: #89e5bb;
                               transform: translateX(-50%) translateY(50%);
                           }
                        }
                        .mask_ld{
                           position: absolute;
                           bottom: 0;
                           left:0; 
                           width:50%;
                           height: 50%;
                           background: rgba(0, 0, 0,.5);
                           overflow: hidden;
                           transition: all .5s;
                           transform: translateX(-101%) translateY(100%);
                           
                           a{
                               display: block;
                               font-size: 20px;
                               text-align: center;
                               position: absolute;
                               top: 0;
                               right: 0;
                               color: #89e5bb;
                               transform: translateX(50%) translateY(-50%);
                           }
                        }
                        .mask_rd{
                           position: absolute;
                           bottom: 0;
                           right:0; 
                           width:50%;
                           height: 50%;
                           background: rgba(0, 0, 0,.5);
                           overflow: hidden;
                           transition: all .5s;
                           transform: translateX(101%) translateY(100%);
                           
                           a{
                               display: block;
                               font-size: 20px;
                               text-align: center;
                               position: absolute;
                               top: 0;
                               left: 0;
                               color: #89e5bb;
                               transform: translateX(-50%) translateY(-50%);
                           }
                           
                        }
                
                            
                
                
                .img_block:hover .mask_top{
                   transform: translateY(0);
                }
                .img_block:hover .mask_dowm{
                   transform: translateY(0);
                } 
                .img_block:hover .mask_left{
                   transform: translateX(0);
                }
                .img_block:hover .mask_right{
                   transform: translateX(0);
                } 
                 .img_block:hover .mask_r_t{
                    transform: rotateZ(45deg) translateX(-31px) translateY(-4.35%);
                }
                .img_block:hover .mask_l_d{
                    transform: rotateZ(45deg) translateX(-31px) translateY(95.65%);
                }
                .img_block:hover .mask_lt{
                    transform: translateX(0) translateY(0);
                }
                .img_block:hover .mask_rt{
                    transform: translateX(0) translateY(0);
                }
                .img_block:hover .mask_ld{
                    transform: translateX(0) translateY(0);
                }
                .img_block:hover .mask_rd{
                    transform: translateX(0) translateY(0);
                }
                
               .text_block{
                   font-size: 14px;
                   margin-top: 14px;
                   p{
                      color: #444f58;
                      padding-bottom: 5px;
                   }
                   span{
                       
                      color: #99999a ; 
                   }
               }
           }
        
       }
       .b_block::after{
           content: "";
           display: inline-block;
           width: 100%;
           height: 0;
           
       }
       .pages{
           li{
               float: left;
               margin-left: 9px;
               width: 38px;
               height: 38px;
               a{
                   display: block;
                   line-height: 38px;
                   text-align: center;
                   border: solid 1px #e7e7e7;
                   border-radius: 3px;
                   color: #444f58;
               }
           }
           .active{
               border: solid 1px #eb413d;
           }
           .Jump_to{
                width: 68px;
                height: 38px;
                a{
                    color: #99999a;
                }
           }
           .text{
                width: 68px;
                height: 38px;
                border: solid 1px #e7e7e7;
                line-height: 38px;
                input{
                    width: 30px;
                    padding-left:5px ;
                    padding-right: 5px;
                    border: none;
                    margin-left: 10px;
                }
           }
           span{
               float: left;
               color: #444f58;
               
           }
           .stop{
                   line-height: 22px;
                   font-size: 30px;
                   margin-left: 9px;
           }
           .Jump{
               font-size: 12px;
               line-height: 42px;
               margin-left: 9px;
           }
       }
    }
}
